<template>
  <el-row>
    <el-col>
      <el-label style="width:150px">订单号 : {{ orderId }}</el-label>
      <el-label style="position: relative;left: 10%;">票务名称 ：{{ tictName }}</el-label>
      <el-label style="position: relative;left: 20%;">场馆 : {{ yardName }}</el-label>
      <el-label style="position: relative;left: 30%;">演出场次 ： {{ boradsTime }}</el-label>
      <el-label style="position: relative;left: 40%;">票务演出日期 ： {{ showTime | formatDate }}</el-label>
    </el-col>
    <!--        <el-col>-->
    <!--            <el-label>订单号 : </el-label>-->
    <!--            <el-input filterable placeholder="请输入订单号查询购票记录" @change='changeAuditState' style="width:150px" v-model="searchDate.orderId">-->
    <!--            </el-input>-->
    <!--            <el-label >用户 : </el-label>-->
    <!--            <el-input filterable placeholder="请输入用户ID查询购票记录" @change='changeAuditState' style="width:150px" v-model="searchDate.userName">-->
    <!--            </el-input>-->
    <!--        </el-col>-->
    <!--        <el-col>-->
    <!--            <label>商户:</label>-->
    <!--            <el-select filterable placeholder="请选择商户" @change='changeYard' style="width:150px" v-model="defaultAuditState">-->
    <!--                <el-option v-for="(ky,val) in auditState" :key="ky" :label="ky" :value="val"></el-option>-->
    <!--            </el-select>-->
    <!--        </el-col>-->
    <!--        <span>请选择</span>-->
    <!--        <el-select  filterable placeholder="请选择票务信息" @change='getTictValue'>-->
    <!--            <el-option-->
    <!--                    v-for="item in tictData"-->
    <!--                    :key="item.code"-->
    <!--                    :label="item.name"-->
    <!--                    :value="item.name">-->
    <!--                {{item.name}}-->
    <!--            </el-option>-->
    <!--        </el-select>-->
    <el-main>
      <el-table
        :data="orderData"
        border
        size="mini"
        highlight-current-row
        style="font-size: 16px;"
        :summary-method="getSummaries"
        show-summary
      >
        < <el-table-column prop="tictKind" label="票务种类" min-width="70" />
        <el-table-column prop="tictCode" label="票务编号" min-width="50" />
        <el-table-column prop="seat" label="座位号" min-width="50" />
        <el-table-column prop="useTime" label="票务使用时间" min-width="50" :formatter="tableformatDate" >
        </el-table-column>
        <el-table-column prop="tictPrice" label="票务价格" min-width="70" />
        <!--            <el-table-column prop="tictCode" label="票代码" min-width="50"></el-table-column>-->
      </el-table>
    </el-main>

    <el-row type="flex" justify="center" class="pagination">
      <el-pagination
        :current-page="orderPage.currentPage"
        :page-sizes="[10, 20, 30]"
        :page-size="orderPage.pageSize"
        layout="total, sizes, prev, pager, next, jumper"
        :total="orderPage.totalElements"
        @size-change="userSize"
        @current-change="pgChge"
      />
    </el-row>
  </el-row>
</template>

<script>
import { getDataForSP, writePageInfo } from '../../../utils/webUtils.js'
import {formatDate} from "../../../utils/date";

export default {
  filters: {
    formatDate(time) {
      var date = new Date(time);
      return formatDate(date, 'yyyy-MM-dd hh:mm');
    },
  },
  name: 'Orderlist',
  components: {},
  props: {
    tictUuid: {
      type: String
    }
  },
  data() {
    return {
      uuid: this.tictUuid,
      formAlignLeft: 'left',
      editBoxShow: false,
      addShow: false,
      editShow: false,
      pwdShow: false,
      userSchOn: '',
      userEdit: false,
      orderData: [],
      searchDate: {},
      orderId: '',
      handleState:'',
      tictName: '',
      yardName: '',
      boradsTime: '',
      showTime:'',
      perFormTimes: '',
      defaultAuditState: '',
      orderPage: {
        pageSize: 10, // 每页显示条目个数
        currentPage: 1, // 当前页数
        totalElements: 0,
        searchData: {
          adr: ''
        }
      }
    }
  },
  // 深度监听父组件的props传值
  watch: {
    tictUuid(val) {
      this.uuid = val
      this.queryRecedeDetail()
    }
  },
  created(){
    this.queryRecedeDetail()
  },
  mounted() {

  },
  methods: {
    //使用时间转换时间戳
    tableformatDate(row, column) {
      let date = new Date(parseInt(row.useTime));
      let Y = date.getFullYear() + '-';
      let M = date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) + '-' : date.getMonth() + 1 + '-';
      let D = date.getDate() < 10 ? '0' + date.getDate() + ' ' : date.getDate() + ' ';
      let h = date.getHours() < 10 ? '0' + date.getHours() + ':' : date.getHours() + ':';
      let m = date.getMinutes()  < 10 ? '0' + date.getMinutes() + ':' : date.getMinutes() + ':';
      let s = date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds();
      return Y + M + D + h + m + s;
    },
    // 指定列求和
    getSummaries(param) {
      const { columns, data } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) {
          sums[index] = '合计'
          return
        }
        const values = data.map(item => Number(item[column.property]))
        if (column.property == 'tictPrice') {
          sums[index] = values.reduce((prev, curr) => {
            const value = Number(curr)
            if (!isNaN(value)) {
              return prev + curr
            } else {
              return prev
            }
          }, 0)
          console.log(sums)
          sums[index]
        }
      })
      return sums
    },
    editOut() {
      this.infoShow = false
      this.info = ''
      this.$emit('editState', false)
    },
    // 获取所有数据
    queryRecedeDetail() {
      this.axios.request({
        method: 'get',
        url: './tck/order/refund-history/' + this.uuid,
      }).then(response => {
        //订单号
        this.orderId=response.data.data.orderId
        //票务名称
        this.tictName=response.data.data.tictName
        //场馆名称
        this.yardName=response.data.data.yardName
        //播出场次
        this.boradsTime=response.data.data.boradsTime
        //演出场次
        this.showTime=response.data.data.showTime
        //票务演出日期
        this.orderData = response.data.data.detalList
        writePageInfo(this.orderPage, response.data)
      }).catch(error => {
        console.log(error)
      })
    },
    submit(param){
      this.handleState=param
      this.axios.request({
        method: 'put',
        url: './tck/order/refund-history/update',
        headers: {
          'Content-Type': 'application/json;charset=UTF-8'
        },
          data:{id:this.uuid,
          handleState:this.handleState},
      }).then(response => {
        this.sucess();
      }).catch(error => {
        console.log(error)
      })
    },
    sucess() {
      this.$notify({
        title: '成功',
        message: '操作成功',
        type: 'success'
      });
      this.$emit("close");
    },
    // 列表分页
    userSize: function(pageSize) {
      this.orderPage.pageSize = pageSize
      if (this.orderPage.currentPage === 1) {
        if (this.userSchOn !== '') {
          // this.userSearch();
        } else {
          this.queryRecedeDetail()
        }
      }
      this.orderPage.currentPage = 1
    },
    pgChge(currentPage) {
      this.orderPage.currentPage = currentPage
      this.queryRecedeDetail()
    }
  }
}
</script>

